Skip to main content

FieldContainer

The `FieldContainer` component is a container that can be used to wrap inputs to form a labeled field.
<FieldContainer label="Lorem ipsum">
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>
<FieldContainer
	label="Lorem ipsum"
	labelDescription="Lorem ipsum dolor"
	description="Lorem ipsum dolor sit amet"
>
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>

<FieldContainer
	display="inline"
	label="Lorem ipsum"
	labelPosition="left"
	labelDescription="Lorem ipsum dolor"
	description="Lorem ipsum dolor sit amet"
>
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>

<FieldContainer
	display="inline"
	labelPosition="right"
	label="Lorem ipsum"
	labelDescription="Lorem ipsum dolor"
	description="Lorem ipsum dolor sit amet"
>
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>

<FieldContainer
	labelPosition="left"
	label="Lorem ipsum"
	labelDescription="Lorem ipsum dolor"
	description="Lorem ipsum dolor sit amet"
>
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>

<FieldContainer
	labelPosition="right"
	label="Lorem ipsum"
	labelDescription="Lorem ipsum dolor"
	description="Lorem ipsum dolor sit amet"
>
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>

<FieldContainer
	labelPosition="bottom"
	label="Lorem ipsum"
	labelDescription="Lorem ipsum dolor"
	description="Lorem ipsum dolor sit amet"
>
	<TextInput name="name" placeholder="Enter name..." />
</FieldContainer>
Intersection of
__type
children*
React.ReactNode
className
string
description
React.ReactNode
direction
| "horizontal"| "vertical"| "vertical-reverse"| "horizontal-reverse"
display
| "inline"| "block"
evenly
boolean
gap
| boolean| "padding"| "larger"| "gap"| "gutter"| DeprecatedStackSize
horizontal
boolean
label*
React.ReactNode
labelDescription
React.ReactNode
labelPosition
FieldContainerLabelPosition
required
boolean
reverse
boolean
size
Size
style
React.CSSProperties
useLabelElement
boolean
width
| "none"| "column"| "fluid"
ErrorListProps
ErrorListProps
errors
FieldErrors